<template>
	<div class="tab_box app_background background-contain">

    <!--标题栏-->
    <header class="header-top clearfix" id='header'>
      <a class="header-title co-fl w65 text-ellipsis" href="javascript:;" @click="clickTitle(PassByValue,specialtyindex,industryCode)" >{{headerTitle.username}}全都有的{{headerTitle.tyep}}特征 &gt;</a>
      <a class="add-project iconfont icon-tianjia co-fr" title="添加工程指标"  @click="addProject(PassByValue,specialtyindex,industryCode)"></a>
    </header>

    <!--特征库信息内容-->
    <section class="address-main" id="address">

      <div class="address-main-t clearfix">

        <div class="address-main-t-l co-fl">
          <h3 class="font-32rem font-normal co-fl" v-html="specificNum">38</h3>
          <span class="co-fl" v-html="specificUnit">km</span>
        </div>

        <div class="address-main-t-r co-fl w65">
          <p class="text-ellipsis" v-html="locationInfo">广州市-市区</p>
          <p class="text-ellipsis" v-html="specififMode">明挖车站</p>
        </div>

      </div>

      <div class="address-main-b">
        <p class="text-ellipsis-2" v-html="moreInfo">默认运距 | 地下车站 1-3层 | 二类土质 | 抗震等级 3级 | 山体平整 </p>
      </div>
    </section>

    <!--主要内容模块-->
    <section class="important-main">
      <div class="important-main-l co-fl">
        <!--其他选择-->
        <ul class="overflow-scroll">
          <!--industryCodeList[0].indexCode-->
          <li class="codeActive" @click="bindQuerybyIndustryCode($event,'','','常用');">
            <a href="javascript:;">
              <i class="dis-block iconfont icon-zuoce-changyong" style="width: 100%;font-size: 1.125rem"></i>
              <!--<svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuoce-changyong-gaoliang"></use>
              </svg>-->
              <span>常用</span>
            </a>
          </li>
          <li v-for="(list,index) in industryCodeList" @click="bindQuerybyIndustryCode($event,list.indexCode,index,list.indexName);" >
            <a href="javascript:;">
              <i class="dis-block iconfont" :class=FnSpecialtyIocnFont(list.specialtyCode) style="width: 100%;font-size: 1.125rem"></i>
              <!--<svg class="icon" aria-hidden="true">
                &lt;!&ndash;SpecialtyIcon[i].code&ndash;&gt;
                <use :xlink:href=xlink+FnSpecialtyIocnFont(list.specialtyCode) ></use>
              </svg>-->
              <span>{{list.indexName}}</span>
            </a>
          </li>
          <!--<li class="cur">
            <a href="javascript:;">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuoce-changyong-gaoliang"></use>
              </svg>
              <span>常用</span>
            </a>
          </li>

          <li>
            <a href="javascript:;">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuoce-xianlu"></use>
              </svg>
              <span>线路</span>
            </a>
          </li>

          <li>
            <a href="javascript:;">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuoce-chezhan"></use>
              </svg>
              <span>车站</span>
            </a>
          </li>

          <li>
            <a href="javascript:;">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuoce-qujian"></use>
              </svg>
              <span>区间</span>
            </a>
          </li>

          <li>
            <a href="javascript:;">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuoce-guidao"></use>
              </svg>
              <span>轨道</span>
            </a>
          </li>

          <li>
            <a href="javascript:;">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuoce-tongxun"></use>
              </svg>
              <span>通讯</span>
            </a>
          </li>-->
        </ul>
        <!--指标设置-->
        <a class="target-set box-t-shadow text-center" href="javascript:;" @click="Totarget_set()">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shezhi"></use>
          </svg>
        </a>
      </div>

      <!--指标内容-->
      <div class="important-main-r co-fr" id="indexsublist">
        <scroller :on-infinite="infinite" ref="indexsublist">
          <ul class="ul-target overflow-scroll">
            <!--<li v-for="(list,index) in IndexsubList" @click="Todetail(list.id,list.indexCode,list.indexType);">
              <a href="javascript:;">
                <div class="word-box co-fl">
                  <h3 class="font-08rem p-b-025rem text-ellipsis">{{list.indexName}}</h3>
                  <p class="text-ellipsis">一级-车站</p>
                  <p class="text-ellipsis">所选特征下</p>
                  <p class="text-ellipsis"><span class="color-c9062c">1</span>组指标参考</p>
                </div>
                <div class="other-box co-fr p-l-025rem">
                  &lt;!&ndash;<div class="img-center">
                    <img src="../../../static/images/product_1.jpg"/>
                  </div>&ndash;&gt;
                  <h4 class="font-07rem">二级</h4>
                  <p class="text-ellipsis-2">车站&gt;车站主体</p>
                </div>
              </a>
            </li>-->

            <li v-for="(list,index) in IndexsubList" @click="Todetail(list.id,list.indexCode,list.indexType,list.refCount);">
              <a href="javascript:;">
                <div class="word-box co-fl">
                  <h3 class="font-08rem p-b-025rem text-ellipsis">{{list.indexName}}</h3>
                  <p class="text-ellipsis">所选特征下</p>
                  <p class="text-ellipsis"><span class="color-c9062c">{{list.refCount}}</span>组指标参考</p>
                </div>
                <div class="other-box co-fr p-l-025rem">
                  <h4 class="font-07rem">{{Listlevel[list.level]}}级</h4>
                  <p class="text-ellipsis-2" v-if="list.parentList.length>=1 && list.parentList.length<0">{{list.parentList[0].indexName}}&gt;{{list.parentList[1].indexName}}</p>
                  <p class="text-ellipsis-2" v-if="list.parentList.length>=2">{{list.parentList[0].indexName}}&gt;{{list.parentList[1].indexName}}</p>
                </div>
              </a>
            </li>

            <!--<li>
              <a href="javascript:;">
                <div class="word-box co-fl">
                  <h3 class="font-08rem p-b-025rem text-ellipsis">出入口通道</h3>
                  <p class="text-ellipsis">一级-车站</p>
                  <p class="text-ellipsis">所选特征下</p>
                  <p class="text-ellipsis"><span class="color-c9062c">2</span>组指标参考</p>
                </div>
                <div class="other-box co-fr p-l-025rem">
                  <div class="img-center">
                    <img src="images/product_2.jpg"/>
                  </div>
                </div>
              </a>
            </li>

            <li>
              <a href="javascript:;">
                <div class="word-box co-fl">
                  <h3 class="font-08rem p-b-025rem text-ellipsis">围护结构</h3>
                  <p class="text-ellipsis">所选特征下</p>
                  <p class="text-ellipsis"><span class="color-c9062c">2</span>组指标参考</p>
                </div>
                <div class="other-box co-fr p-l-025rem">
                  <h4 class="font-07rem">二级</h4>
                  <p class="text-ellipsis-2">车站&gt;车站主体</p>
                </div>
              </a>
            </li>

            <li>
              <a href="javascript:;">
                <div class="word-box co-fl">
                  <h3 class="font-08rem p-b-025rem text-ellipsis">土石方</h3>
                  <p class="text-ellipsis">所选特征下</p>
                  <p class="text-ellipsis"><span class="color-c9062c">2</span>组指标参考</p>
                </div>
                <div class="other-box co-fr p-l-025rem">
                  <h4 class="font-07rem">二级</h4>
                  <p class="text-ellipsis-2">车站&gt;车站主体</p>
                </div>
              </a>
            </li>

            <li>
              <a href="javascript:;">
                <div class="word-box co-fl">
                  <h3 class="font-08rem p-b-025rem text-ellipsis">内部钢筋混凝土结构</h3>
                  <p class="text-ellipsis">所选特征下</p>
                  <p class="text-ellipsis"><span class="color-c9062c">5</span>组指标参考</p>
                </div>
                <div class="other-box co-fr p-l-025rem">
                  <h4 class="font-07rem">三级</h4>
                  <p class="text-ellipsis-2">车站&gt;车站主体&gt;土石方</p>
                </div>
              </a>
            </li>

            <li>
              <a href="javascript:;">
                <div class="word-box co-fl">
                  <h3 class="font-08rem p-b-025rem text-ellipsis">地下连续墙</h3>
                  <p class="text-ellipsis">所选特征下</p>
                  <p class="text-ellipsis"><span class="color-c9062c">5</span>组指标参考</p>
                </div>
                <div class="other-box co-fr p-l-025rem">
                  <h4 class="font-07rem">三级</h4>
                  <p class="text-ellipsis-2">车站&gt;出入后通道&gt;围护结构</p>
                </div>
              </a>
            </li>

            <li>
              <a href="javascript:;">
                <div class="word-box co-fl">
                  <h3 class="font-08rem p-b-025rem text-ellipsis">地下连续墙</h3>
                  <p class="text-ellipsis">所选特征下</p>
                  <p class="text-ellipsis"><span class="color-c9062c">5</span>组指标参考</p>
                </div>
                <div class="other-box co-fr p-l-025rem">
                  <h4 class="font-07rem">三级</h4>
                  <p class="text-ellipsis-2">车站&gt;出入后通道&gt;围护结构</p>
                </div>
              </a>
            </li>

            <li>
              <a href="javascript:;">
                <div class="word-box co-fl">
                  <h3 class="font-08rem p-b-025rem text-ellipsis">地下连续墙</h3>
                  <p class="text-ellipsis">所选特征下</p>
                  <p class="text-ellipsis"><span class="color-c9062c">5</span>组指标参考</p>
                </div>
                <div class="other-box co-fr p-l-025rem">
                  <h4 class="font-07rem">三级</h4>
                  <p class="text-ellipsis-2">车站&gt;出入后通道&gt;围护结构</p>
                </div>
              </a>
            </li>-->

            <div class="add-target" @click="addProject(PassByValue,specialtyindex,industryCode)">
              <a class="text-center dis-block" href="javascript:;" >
                <span v-if="headerTitle.tyep == '常用'">添加常用指标</span>
                <span v-else>添加指标</span>
                <i class="iconfont icon-tianjiachangyongzhibiao"></i>
              </a>
            </div>

          </ul>
        </scroller>
      </div>

    </section>


    <div id="pop">
      <!--页面所需弹窗-->
      <!--<div class="p-tb-075rem clearfix text-center">
        <a href="javascript:;" @click="show('#zhibiao_pop')" id="show_zhibiao" class="dis-block line-h-14rem background-ffffff text-center" >请选择您常用的指标</a>
        <div class="line-1"></div>
        <a href="javascript:;" @click="show('#tezheng_pop')" id="show_tezheng" class="dis-block line-h-14rem background-ffffff text-center" >请选择您关注的特征</a>
      </div>-->
      <!--请选择您常用的指标-->
      <section id="zhibiao_pop" class="coui-pop-bg-two BoxWrap">
        <div class="coui-pop-main p-b-25rem">
          <div class="title-main text-center text-ellipsis p-lr-10rem">请选择你常用的指标</div>
          <div id="iconListBox">
            <ul class="choose-target-up text-center p-t-075rem p-b-022rem swiper-wrapper">
              <li class="swiper-slide" v-for="(List,index) in industryCodeWindList" @click="bindClickIschooseIcon($event,List.specialtyCode,List.indexType,List.industryCode);" :class=" index == 0 ? 'chooseIconActive' : '' "  :data-indexcode=List.specialtyCode >
                <a href="javascript:;">
                  <i class="dis-block iconfont" :class=FnSpecialtyIocnFont(List.specialtyCode)></i>
                <span class="text-ellipsis-2">{{List.indexName}}</span>
                </a>
              </li>
              <!--<li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">车站</span></a></li>
              <li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">区间</span></a></li>

              <li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">路线</span></a></li>
              <li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">车站</span></a></li>
              <li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">区间</span></a></li>-->
            </ul>
          </div>
          <!--默认线条-->
          <div class="line-1"></div>
          <p class="color-999999 font-07rem p-lr-05rem p-t-05rem">*影响80%造价占比为以下推荐指标</p>
          <div style="height: 11rem;">
            <scroller :on-infinite="SaveIndexinfinite"  ref="SaveIndexlist">
              <ul class="choose-target-down overflow-scroll p-lr-10rem m-t-05rem" id="ChoosedIndexBox">
                <li v-for="(item,index) in dataQuerybyspecialtycodeList" @click="chooseNorm($event)" :class="index == 0 ? 'cur' : ''" :data-indextype=item.indexType :data-indexcode=item.indexCode :data-indexname=item.indexName>
                  <a href="javascript:;">
                    <span class="left-icon iconfont co-fl" :class=FnSpecialtyIocnFont(item.specialtyCode)></span>
                    <span class="w65 text-ellipsis co-fl font-07rem" >{{item.indexName}}-{{item.parent.indexName}}</span>
                    <i class="iconfont icon-gou small-custom-icon choose-boolean co-fr" :class="index == 0 ? 'cur' : ''"></i>
                  </a>
                </li>
              </ul>
            </scroller>
          </div>
        </div>
        <!--默认-->
        <i class="small-chunk"></i>
        <div class="common-custom-icon co-button-sure text-center" @click="clickHide('#zhibiao_pop','#tezheng_pop',$event)"><i class="iconfont icon-gou font-15rem"></i></div>
      </section>
      <!--请选择您关注的特征-->

      <section id="tezheng_pop" class="coui-pop-bg-two BoxWrap" ref="BoxWrapHide">
        <div class="coui-pop-main p-b-22rem">
          <div class="title-main text-center text-ellipsis p-lr-10rem"><i class="iconfont icon-fanhui font-09rem co-fl" @click="BindBoxWrapHide();"></i>请选择您关注的特征</div>

          <div class="trait-up p-tb-025rem">
            <div class="trait-up-main p-tb-025rem p-lr-10rem">
              <i class="trait-up-main-left iconfont icon-zuoce-chezhan co-fl p-r-05rem"></i>
              <div class="trait-up-main-right co-fl">
                <h4 class="font-09rem text-ellipsis-2 line-h-14rem">{{QuerybyspecialtycodendexName}}</h4>
                <p class="color-999999">*80%以上的概率会出现的默认特征</p>
              </div>
            </div>
            <ul class="crosswise-select-choose p-lr-05rem p-tb-05rem clearfix">
              <li v-for="List in IndexAttrList.slice(0,4)">
                <span class="attrName">{{List.attrName}}</span>
                <!--<a class="select-box text-ellipsis" href="javascript:;">明挖</a>-->
                <a class="SelectBox" href="javascript:;">
                  <select name="" id="" class="left" :data-attrId=List.id >
                    <option v-if="List.scope != ''" v-for="selectList in List.scope.split(',')">{{selectList}}</option>
                    <option v-else="List.scope == ''">无</option>
                  </select>
                </a>
              </li>
              <!--<li><span>地质</span>
                <a class="SelectBox" href="javascript:;">
                  <select name="" id="" class="left">
                    <option value="">软土层</option>
                    <option>软土层2</option>
                  </select>
                </a>
              </li>
              <li><span>土质</span>
                <a class="SelectBox" href="javascript:;">
                  <select name="" id="" class="left">
                    <option value="">三类</option>
                    <option>三类2</option>
                  </select>
                </a>
              </li>
              <li><span>抗震</span>
                <a class="SelectBox" href="javascript:;">
                  <select name="" id="" class="left">
                    <option value="">二级</option>
                    <option>二级2</option>
                  </select>
                </a>
              </li>-->
            </ul>
          </div>

          <!--默认线条-->
          <div class="line-1"></div>
          <div class="p-lr-075rem m-tb-075rem h70rem clearfix" id="SavefeatureBox">
            <scroller :on-infinite="Savefeatureinfinite"  ref="Savefeaturelist">
              <ul class="vertical-select-choose overflow-scroll clearfix">
                <li v-for="List in IndexAttrList.slice(4,IndexAttrList.length)">
                  <i class="iconfont icon-bianji co-fl color-999999"></i>
                  <span class="co-fl text-ellipsis w30 font-07rem p-l-025rem">{{List.attrName}}</span>
                  <!--    <a class="select-box co-fl w45 text-ellipsis" href="javascript:;">1-3层</a>-->
                  <a href="javascript:;" class="co-fl w45" >
                    <select :data-attrId=List.id>
                      <option v-if="List.scope != ''" v-for="selectList in List.scope.split(',')">{{selectList}}</option>
                      <option v-else="List.scope == ''">无</option>
                    </select>
                  </a>
                  <i class="iconfont icon-gou small-custom-icon choose-boolean co-fr" @click="bindClickVerticalChoose($event);"></i>
                </li>
                <!--<li>
                  <i class="iconfont icon-bianji co-fl color-999999"></i>
                  <span class="co-fl text-ellipsis w30 font-07rem p-l-025rem">车站类型</span>
                  <a class="co-fl w45" href="javascript:;">
                    <select name="" id="">
                      <option value="">普通车站</option>
                    </select>
                  </a>
                  <i class="iconfont small-custom-icon choose-boolean icon-gou co-fr" @click="bindClickVerticalChoose($event);"></i>
                </li>
                <li>
                  <i class="iconfont icon-bianji co-fl color-999999"></i>
                  <span class="co-fl text-ellipsis w30 font-07rem p-l-025rem">区域特征</span>
                  <a class="co-fl w45" href="javascript:;">
                    <select name="" id="">
                      <option value="">城区</option>
                    </select>
                  </a>
                  <i class="iconfont small-custom-icon choose-boolean icon-gou co-fr"  @click="bindClickVerticalChoose($event);"></i>
                </li>
                <li>
                  <i class="iconfont icon-bianji co-fl color-999999"></i>
                  <span class="co-fl  text-ellipsis w30 font-07rem p-l-025rem">其他特征</span>
                  &lt;!&ndash;<a class="select-box co-fl w45 text-ellipsis" href="javascript:;">我屌你</a>&ndash;&gt;
                  <a class="co-fl w45" href="javascript:;">
                    <select name="" id="">
                      <option value="">我屌你</option>
                    </select>
                  </a>
                  <i class="iconfont small-custom-icon choose-boolean icon-gou co-fr"  @click="bindClickVerticalChoose($event);"></i>
                </li>-->
              </ul>
            </scroller>
          </div>
          <!--默认线条-->
          <div class="line-1"></div>

          <div class="trait-down">
            <p class="p-tb-05rem text-center color-999999 ">单位：运距（km）</p>
            <div class="wrap">
              <div class="text-center">
                <div class="timeValue" initial-value="8" value="0">0</div>
              </div>
              <div class="timer-wrap">
                <div class="timer" id="timerId" value="0" data-initial='true'>
                  <ul>
                    <li></li>
                    <li>0</li>
                    <li>10</li>
                    <li>20</li>
                    <li>30</li>
                    <li>40</li>
                    <li>50</li>
                    <li>60</li>
                    <li>70</li>
                    <li>80</li>
                    <li>90</li>
                    <li>100</li>
                    <li></li>
                    <li></li>
                  </ul>
                </div>
                <div class="mark"></div>
              </div>
            </div>
          </div>
        </div>
        <!--默认-->
        <i class="small-chunk"></i>
        <div class="common-custom-icon co-button-sure text-center" @click="hide('#tezheng_pop',$event)"><i class="iconfont icon-gou font-15rem"></i></div>
      </section>
    </div>


    <loading v-show="FangLoading"></loading>
    <fangerror :fangerroring="fangerroring" :fangerrorText="fangerrorText"></fangerror>
    <meun></meun>

	</div>
</template>

<!--IndexJS部分-->
<script src="../../../static/js/index.js"></script>
<!--CSS部分-->
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../static/plugins/swiper4x/swiper.min.css"
  @import "../common/stylus/meta.styl";
  @import "../../../static/js/lib/select2/css/select2.styl";
  @import "./index.styl"
</style>
